<template>
  <div class="singer">
    <div class="hotsongs">热门歌手</div>
    <ul class="singgerlist">
      <router-link :to="`/singersong/${item.id}`" tag="li" v-for="(item,index) in singerList" :key="index">
        <img :src="item.picUrl" alt="">
        <h6>{{item.name}}</h6>
      </router-link>
    </ul>
  </div>
</template>
<script>
export default {
    data(){
      return{
        singerList:[]
      }
    },
    created(){
      // 获取热门歌手
      this.$http.get('/top/artists').then(d=>{
        this.singerList = d.data.artists;
        console.log('歌手信息==>',this.singerList);
      })
    }
}
</script>
<style lang="less" scoped>
.singer{
  .hotsongs{
    line-height: 30px;
    padding: 10px;
    
  }
  .singgerlist{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    li{
      width: 32%;
      height: 25vh;
      img{
        height: 80%;
        border-radius: 20px;
        width: 100%;
      }
      h6{
        text-align: center;
        font-weight: 400;
        margin-top: 5px;
      }
    }
  }
}
</style>